<?php
    use_javascript('data/main.js');
    use_javascript('data/helper.js');
    use_javascript('jquery/jquery.numeric.js');
    use_javascript('data/speciesform.js');
?>

<div style="margin: 5px 0; padding: 3px 0; ">
    <form id="species-form" method="post" action="<?php echo url_for('data/') ?>">
        <fieldset style="padding: 0; margin: 0; border: 0;" >            
            <?php
                if (!empty($currentDepth))
                    echo $obsDetailForm['observationdepthid']->render(array('value' => $currentDepth->getId()));
                else
                    echo $obsDetailForm['observationdepthid']->render();
            ?>

            <?php echo $obsDetailForm['id']->render() ?>

            <table>
                <tr>
                    <td style="width: 105px"><?php echo $obsDepthForm['observationdepth']->renderLabel('Current Depth') ?></td>
                    <td>
                        <?php echo $obsDepthForm['observationdepth']->render(array(
                            'class' => 'field-dialog ui-widget-content ui-corner-all',
                            'readonly' => !empty($currentDepth),
                            'value' => $currentDepth,
                            'style' => 'width: 40px;' . (empty($currentDepth) ? '' : 'border-color: #DDDDDD;')
                        )) ?>
                        <button type="button" id="update-depth" title="Edit depth">Edit</button>
                        <button type="button" id="delete-depth" title="Delete this depth">Delete</button>
                    </td>
                </tr>
            </table>
            <br/>
            <table class="ui-widget-content" style="width: 100%; padding: 5px;">
                <tr>
                    <td colspan="2">
                        <p id="validate-tip" style="width: 99%; padding: 3px; display: none; font-size: 13px" ></p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px">
                        <?php echo $speciesForm['species']->renderLabel('Species Name') ?>
                    </td>
                    <td nowrap>
                        <?php echo $speciesForm['id']->render() ?>
                        <?php echo $speciesForm['species']->render(array(
                            'class' => 'field-dialog ui-widget-content ui-corner-all',
                            'style' => 'width: 250px',
                            'onchange' => 'validateSpecies(this.value)')) ?>
<!--                        <button type="button" id="edit-species-input" title="Edit species">Edit</button>-->
                        <span id="valid_sp_msg" class="ui-state-error-text"></span>
                    </td>
                </tr>
                <tr>
                    <td><?php echo $obsDetailForm['quantity']->renderLabel('Quantity')?></td>
                    <td>
                        <?php echo $obsDetailForm['quantity']->render(array(
                            'class' => 'field-dialog text ui-widget-content ui-corner-all',
                            'style' => 'width: 100px'
                        )) ?>
                    </td>
                </tr>
                <tr valign="middle">
                    <td valign="middle"><?php echo $unitForm['unit']->renderLabel('Unit') ?></td>
                    <td valign="middle">
                        <?php echo $unitForm['unit']->render(array(
                            'class' => 'field-dialog text ui-widget-content ui-corner-all',
                            'style' => 'width: 100px',
                            'onchange' => 'loadExtendedUnits(this.value, null)')) ?>
                        <span><button type="button" title="Add new unit" id="add_unit" onclick="showUnitForm();">
                            add
                        </button></span>
                    </td>
                </tr>
                <tr>
                    <td><?php echo $obsDetailForm['tag']->renderLabel('Tags') ?></td>
                    <td>
                        <?php echo $obsDetailForm['tag']->render(array(
                            'class' => 'field-dialog text ui-widget-content ui-corner-all',
                            'style' => 'width: 300px')) ?>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <button id="save-species" type="button">add to list</button>
                        <button id="edit-species" type="button">edit</button>
                        <button id="clear-form" type="button">reset</button>
                    </td>
                </tr>
            </table>
            
            
        </fieldset>
        
    </form>
</div>

